<template>
  <el-form
    class="login-container"
    ref="AccountForm"
    :model="account"
    :rules="loginRules"
    label-position="left"
  >
    <h3>登录界面</h3>
    <el-form-item label=账号 prop="username">
      <!--prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的-->
      <el-input v-model="account.username"
       placeholder="请输入账号"
       clearable>
      </el-input>
    </el-form-item>
    <el-form-item label=密码 prop="password">
      <el-input
        v-model="account.password"
        placeholder="请输入密码"
        show-password
      ></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" >记住密码</el-checkbox>
    <el-form-item>
      <el-button @click.native.prevent="handleLogin" :loading="logining" type="primary">登陆</el-button>    
      <!--1.给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件，
          2.prevent 是用来阻止默认的相当于原生的event.preventDefault()
          @是v-on的缩写-->
      <el-button type="primary" class="resetBtn" @click.native.prevent="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import {requsetLogin} from '../axios/api'
//v-model为绑定值，
export default {//export default 只能导出一个默认模块
  name: "login",
  data() {//组件的data是一个方法，该方法必须返回一个对象
    return {
      account: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      checked: false,
      logining: false
    };
  },
  methods: {//作事件处理函数
    handleLogin() {
      this.$refs.AccountForm.validate(
          (valid) => {
        //对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：
        //是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
        /*(x) => x + 6 
        function(x){
          return x + 6;
        }
        */
        if (valid) {
          this.logining = true
          let loginParams = {
            username: this.account.username,
            password: this.account.password
          }
          // 调用axios登录接口
          requsetLogin(loginParams).then(
            res => {
            // debugger;
            this.logining = false
            // 根据返回的code判断是否成功
            let { code, msg, user } = res.data//解构赋值
            //let 声明的变量只在 let 命令所在的代码块内有效
            if (code === 200) {// 200（成功）  服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
              // elementui中提示组件
              this.$message({
                type: 'success',
                message: msg
              })
              // 登陆成功，用户信息就保存在sessionStorage中
              sessionStorage.setItem('user', JSON.stringify(user))
              // 跳转到后台主页面
              console.log('this', this)
              this.$router.push({ path: '/home' })//实现页面跳转
            } else {
              this.$message({
                type: 'error',
                message: msg
              })
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    reset() {
      this.$refs.AccountForm.resetFields();
    }
  }
};
</script>

<style scoped>
body {
  background: #dfe9fb;
}
.login-container {
  width: 350px;
  margin-left: 35%; 
  border: 1px solid #d3d3d3;
  box-sizing: border-box;
  padding: 10px 30px;
  border-radius: 15px;
}
.el-button {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  background:#00a2ff
}
.el-button+.el-button {
  margin-left: 0px;
}
</style>
